<template>
  <v-card class="card pa-1" min-height="15vh">
    <v-card-item
      color="#385F73"
      class="pa-1"
      @click="$emit('clickCard')"
      width="100%"
    >
      <v-row>
        <v-row>
          <v-col cols="1" class="d-flex align-center">
            <v-img
              :src="`${getPath}/${path}/${n}.${extension}`"
              height="150px"
              width="150px"
              contain
            ></v-img>
          </v-col>

          <v-col cols="11" class="d-flex flex-column justify-center">
            <v-card-title>
              {{ title }}
            </v-card-title>
            <v-card-text class="pa-0 h-auto">
              {{ description }}
            </v-card-text>
          </v-col>
        </v-row>
      </v-row>
    </v-card-item>
  </v-card>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  props: ["path", "n", "extension", "title", "description"],
  computed: {
    ...mapGetters(["getPath", "getPH"]),
  },
};
</script>
